<template>
    <div class="login-bg">
      <div class="login-container">
        <div class="login-illustration">
          <!-- 卡通形象SVG，可替换为图片 -->
          <svg width="160" height="260" viewBox="0 0 160 260" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="80" cy="80" r="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="70" rx="40" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="45" ry="45" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="200" rx="10" ry="60" fill="#4f8cff"/>
            <ellipse cx="40" cy="200" rx="8" ry="60" fill="#6ed0ff"/>
            <ellipse cx="120" cy="200" rx="8" ry="60" fill="#6ed0ff"/>
            <ellipse cx="80" cy="120" rx="30" ry="10" fill="#4f8cff" opacity="0.1"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="50" ry="50" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="40" ry="40" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="35" ry="35" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="30" ry="30" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="25" ry="25" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="20" ry="20" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="15" ry="15" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="10" ry="10" fill="#FFE0E0"/>
            <ellipse cx="80" cy="80" rx="5" ry="5" fill="#fff" opacity="0.2"/>
            <ellipse cx="80" cy="80" rx="60" ry="60" fill="#FFE0E0"/>
          </svg>
        </div>
        <el-form
          ref="ruleFormRef"
          class="login-card"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
        >
          <h2 class="login-title">欢迎登录</h2>
          <el-form-item prop="accountName">
            <el-input v-model="ruleForm.accountName" placeholder="用户名">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="passWord">
            <el-input v-model="ruleForm.passWord" type="password" show-password placeholder="密码">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)" class="login-btn">登录</el-button>
            <el-button @click="resetForm(ruleFormRef)" class="login-btn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
  import { User, Lock } from '@element-plus/icons-vue'
  import axios from 'axios'
  import { useRouter } from 'vue-router'
  const router=useRouter();
  
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    accountName: '',
    passWord: '',
  })
  const rules = reactive<FormRules>({
    accountName: [
      { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    passWord: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'change',
      },
    ],
  })
  ///登录
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        axios.get("http://localhost:5050/api/Maxage/Login", {params:{
            accountName: ruleForm.accountName,
          passWord: ruleForm.passWord
        }})
        .then(res=>{
            if(res.data.code==200)
        {
            ElMessage.success(res.data.message);
            console.log(res.data.data)
            localStorage.setItem("accountName",res.data.data.accountName)
            router.push("main");
        }
        else
        {
            ElMessage.error(res.data.message);
           
        }
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  </script>
  
  <style scoped>
  .login-bg {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4f8cff 0%, #6ed0ff 100%);
  }
  
  .login-container {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.95);
    border-radius: 32px;
    box-shadow: 0 8px 40px rgba(79, 140, 255, 0.18);
    padding: 0 32px;
    min-width: 600px;
    min-height: 380px;
  }
  .login-illustration {
    flex: 0 0 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
  }
  .login-card {
    flex: 1;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 32px 24px;
    min-width: 320px;
  }
  .login-title {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #4f8cff;
    margin-bottom: 2rem;
    letter-spacing: 2px;
  }
  .el-form-item {
    margin-bottom: 1.5rem;
  }
  .el-input__wrapper {
    border-radius: 16px !important;
    background: #f4f8ff;
    border: 1px solid #e0eaff;
  }
  .el-input__inner {
    background: transparent !important;
  }
  .login-btn {
    border-radius: 16px !important;
    min-width: 100px;
    font-size: 1rem;
    font-weight: 500;
  }
  .el-button--primary {
    background: linear-gradient(135deg, #4f8cff 0%, #6ed0ff 100%) !important;
    border: none;
    color: #fff;
  }
  .el-button--primary:hover {
    filter: brightness(1.08);
  }
  </style>
  